<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿腾讯微博效果</title>
<meta charset="UTF-8">
<style type="text/css">
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.5 \5b8b\4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox form h2{font-weight:400;font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;}
#msgBox form{background:url() repeat-x 0 bottom;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .times a{float:right;color:#889db6;display:none;}
.tr{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
</style>
<script type="text/javascript">
     window.onload=function() {
         var sface = document.getElementById("face");
         var slist = sface.childNodes;
         for (var i = 0; i < slist.length; i++) {
             if (slist[i].nodeType == 1 && slist[i].nodeName.toUpperCase() == "IMG") {
                 slist[i].onclick = function () {
                     for (var i = 0; i < slist.length; i++) {
                         if (slist[i].nodeType == 1 && slist[i].nodeName.toUpperCase() == "IMG") {
                             slist[i].className = "";
                         }
                         this.className = "current";

                     }
                 }
             }
         }
     }

     function addContent(){
         var sgetContent=document.getElementById("conBox").value;

         var sContent="<div class=\"userPic\"><img src=\"img/face.gif\" /></div>"+
        "<div class=\"content\">"+
         "  <div class=\"userName\"><a href=\"javascript:;\">日丶久生情</a>:</div>"+
        " <div class=\"msgInfo\">"+sgetContent+"</div>"+
        " <div class=\"times\"><span>07月05日 12:20</span><a class=\"del\" href=\"javascript:;\">删除</a></div>"+
        " </div>";
         var addLi = document.createElement("li");
         addLi.setAttribute("onmouseover","showDel()");
         addLi.innerHTML = sContent;
         var sUl=  document.getElementById("ucontent");

         var slist = sUl.childNodes;
         var saveLi = new Array();
         for (var i = 0; i < slist.length; i++) {
             if (slist[i].nodeType == 1 && slist[i].nodeName.toUpperCase() == "LI") {
                 saveLi.push(slist[i]);
             }
         }
         for(var i=0;i<saveLi.length;i++) {
             sUl.removeChild(saveLi[i]);
         }
         saveLi.push(addLi);
         for(var i=saveLi.length-1;i>=0;i--){
             sUl.appendChild(saveLi[i]);
         }
     }
     function showDel() {
         var sli = event.srcElement;
         while(sli.nodeName.toUpperCase()!="LI"){
             sli = sli.parentNode;
         }
         var sface = document.getElementById("ucontent");
         var slist = sface.childNodes;
         for (var i = 0; i < slist.length; i++) {
             if(slist[i].nodeType==1 && slist[i].nodeName.toUpperCase()=="LI") {
                 slist[i].lastElementChild.lastElementChild.lastElementChild.style.display = "none";
             }
         }
        sli.lastElementChild.lastElementChild.lastElementChild.style.display="block";

     }
</script>
</head>
<body>
<div id="msgBox">
    <form>
        <h2>来 , 说说你在做什么 , 想什么</h2>
        <div>
            <input id="userName" class="f-text" value="" />
            <p id="face">
                <img  src="img/face1.gif" class="current" />
                <img  src="img/face2.gif" />
            </p>
        </div>
        <div><input id="conBox" class="f-text"></div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
                <input id="sendBtn" type="button" onclick="addContent();" value="添 加" title="快捷键 Ctrl+Enter" />
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul id="ucontent">
            <li onmouseover="showDel();">
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增Ctrl+Enter快捷键发送广播。</div>
                    <div class="times"><span>07月05日 12:20</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li onmouseover="showDel();">
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">新增选择头像功能。</div>
                    <div class="times"><span>07月05日 12:08</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
            <li onmouseover="showDel();">
                <div class="userPic"><img src="img/face.gif" /></div>
                <div class="content">
                    <div class="userName"><a href="javascript:;">日丶久生情</a>:</div>
                    <div class="msgInfo">增加了记录广播时间的功能。</div>
                    <div class="times"><span>07月04日 16:55</span><a class="del" href="javascript:;">删除</a></div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
